<template>
    <div class="breadcrumbLayout">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/cms' }">
                <div class="cms">系统内容管理</div>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <div class="son">{{ route.meta.title }}</div>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>
    
<script setup>
import { useRoute } from "vue-router";

const route = useRoute();
// console.log(route);
</script>
    
<style lang="scss" scoped>
.breadcrumbLayout {
    padding: 8px 40px 8px;
    .el-breadcrumb {
        line-height: 1.5;
        height: 22px;

        .cms {
            color: #00000073;
            font-weight: 500;
        }
        .cms:hover {
            color: var(--color-text);
        }
        .son {
            color: var(--color-text);
        }
        :deep(.el-breadcrumb__separator) {
            color: #00000073;
            font-weight: 500;
        }
    }
}
</style>